<template>
  <div class="right-chart-1">
    <div class="rc1-header">今日租房动态</div>

    <div class="rc1-chart-container">
      <dv-scroll-board :config="config" @click="viewDetail" class="rc-chart-1"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RightChart1',
    data () {
      return {
        config: {
          header: ['时间', '租客', '小区'],
          rowNum: 10,
          columnWidth: 30,
          data: [
            ['2019年12月1日', '吴先生', '四季金辉1栋'],
            ['2019年12月1日', '王先生', '四季园1栋'],
            ['2019年12月1日', '沈先生', '宝带1栋'],
            ['2019年12月2日', '李先生', '梅苑1栋'],
            ['2019年12月2日', '力先生', '文昌花园1栋'],
            ['2019年12月2日', '康先生', '雍华府1栋'],
            ['2019年12月3日', '何先生', '佳加花园1栋'],
            ['2019年12月3日', '古先生', '兰苑1栋'],
            ['2019年12月3日', '顾先生', '山河园1栋'],
            ['2019年12月4日', '叶先生', '四季金辉2栋'],
            ['2019年12月4日', '武先生', '四季园3栋'],
            ['2019年12月4日', '张先生', '宝带4栋'],
            ['2019年12月5日', '申先生', '梅苑5栋'],
            ['2019年12月5日', '杨先生', '文昌花园6栋'],
            ['2019年12月5日', '司徒先生', '雍华府7栋'],
            ['2019年12月6日', '欧阳先生', '佳加花园8栋'],
            ['2019年12月6日', '西门先生', '兰苑8栋'],
            ['2019年12月7日', '水先生', '山河园9栋']
          ]
        }
      }
    },
    methods: {
      viewDetail() {
        window.console.log(1)
      }
    }
  }
</script>

<style lang="less">
  .right-chart-1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .rc1-header {
      font-size: 22px;
      font-weight: bold;
      height: 30px;
      text-align: center;
      margin: 0 0 15px 0;
      line-height: 30px;
    }

    .rc1-chart-container {
      flex: 1;
      display: flex;
    }

    .dv-scroll-board .header .header-item {
      font-size: 16px;
      font-weight: bold;
    }
    .dv-scroll-board .rows .row-item {
      font-size: 16px;
    }

    .rc-chart-1 {
      height: calc(~"100% - 20px");
    }
  }
</style>
